import ProCard, { StatisticCard, CheckCard } from '@ant-design/pro-card';
import { Space, Table, Tooltip, Button, Card, DatePicker, InputNumber, Empty, Divider as AntdDivider } from 'antd';
import BarChart from "./component/BarChart";

import { QuestionCircleOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import moment from 'moment';
import ScheduleSelector from 'react-schedule-selector'
import { useState } from 'react';

import styles from './index.less';


const { Statistic, Divider } = StatisticCard;

export type TableListItem = {
    key: number;
    name: string;
    creator: string;
    createdAt: number;
};
const tableListDataSource: any = [
    {
        "key": 0,
        "name": "计算机网络",
        "creator": "兼某某",
        "createdAt": 1652787270406,
        "stutime": "36课时",
        "score": "6学分",
        "type": "考试",
    },
    {
        "key": 1,
        "name": "计算机组成原理",
        "creator": "兼某某",
        "createdAt": 1652787186725,
        "stutime": "36课时",
        "score": "3学分",
        "type": "报告",
    },
    {
        "key": 2,
        "name": "计算机网络",
        "creator": "林东东",
        "createdAt": 1652787192001,
        "stutime": "36课时",
        "score": "1学分",
        "type": "实验",
    },
];

const columns: ProColumns<TableListItem>[] = [
    {
        title: '课程名称',
        dataIndex: 'name',
        // render: (_) => <a>{_}</a>,
        hideInSearch: true,
        // formItemProps: {
        //     lightProps: {
        //         labelFormatter: (value) => `app-${value}`,
        //     },
        // },
    },
    {
        title: '日期范围',
        dataIndex: 'startTime',
        valueType: 'dateRange',
        hideInTable: true,
        initialValue: [moment(), moment().add(1, 'day')],
    },
    {
        title: '教室',
        dataIndex: 'creator',
        valueType: 'select',
        hideInSearch: true,
        valueEnum: {
            all: { text: '全部' },
            付小小: { text: '付小小' },
            曲丽丽: { text: '曲丽丽' },
            林东东: { text: '林东东' },
            陈帅帅: { text: '陈帅帅' },
            兼某某: { text: '兼某某' },
        },
    },
    {
        title: '课时',
        dataIndex: 'stutime',
        // render: (_) => <a>{_}</a>,
        hideInSearch: true,
    },


    {
        title: '学分',
        dataIndex: 'score',
        // render: (_) => <a>{_}</a>,
        hideInSearch: true,
    },
    {
        title: '结课类型',
        dataIndex: 'type',
        // render: (_) => <a>{_}</a>,
        hideInSearch: true,
    },
    {
        title: (
            <>
                考试时间
                <Tooltip placement="top" title="这是一段描述">
                    <QuestionCircleOutlined style={{ marginLeft: 4 }} />
                </Tooltip>
            </>
        ),
        key: 'since',
        dataIndex: 'createdAt',
        valueType: 'date',
        hideInSearch: true,
        sorter: (a, b) => a.createdAt - b.createdAt,
    },
    {
        title: '操作',
        width: '164px',
        key: 'option',
        valueType: 'option',
        render: () => [
            <a key="link">链路</a>,
            <a key="link2">报警</a>,
            <a key="link3">监控</a>,
            <TableDropdown
                key="actionGroup"
                menus={[
                    { key: 'copy', name: '复制' },
                    { key: 'delete', name: '删除' },
                ]}
            />,
        ],
    },
];

export default () => {
    const [schedule, setSchedule] = useState([]);
    const [numDays, setNumDays] = useState(5);
    const [startTime, setStartTime] = useState(new Date());
    const [minTime, setMinTime] = useState(8);
    const [maxTime, setMaxTime] = useState(20);
    const [hourlyChunks, setHourlyChunks] = useState(1);



    const ljh: any = [
        {
            date: new Date("2022-05-19 10:00:00"),
            title: "上课",
            content: "数据结构内容",
        },
        {
            date: new Date("2022-05-20 09:00:00"),
            title: "开会",
            content: "互联网+研讨会",
        },
        {
            date: new Date("2022-05-21 09:00:00"),
            title: "活动",
            content: "主持开幕仪式",
        },

    ]
    const onChange = (value: any) => {
        console.log(value);
        setSchedule(value);
    }
    const startTimeOnChange = (date: any, dateString: any) => {
        // console.log(date);
        // console.log(dateString);
        // console.log(new Date(dateString));
        setStartTime(new Date(dateString));
    }
    const numDaysOnchange = (value: any) => {
        // console.log(value);
        setNumDays(value);
    }

    return (
        <>
            {/* <Button onClick={() => {
                console.log(tableListDataSource);
            }}>ceshi </Button> */}
            <StatisticCard.Group direction={'row'}>
                <StatisticCard
                    statistic={{
                        title: '教授课程(总种类/总次数)',
                        value: "13/138",
                        suffix: '门',
                        description: (
                            <Space>
                                <Statistic title="及格率" value="72%" />
                                <Statistic title="优秀率" value="13%" />
                            </Space>
                        ),
                    }}
                    footer={<Statistic value={1561} title="累计教授学生" suffix="名" layout="horizontal" />}
                />
                <Divider type={'vertical'} />
                <StatisticCard
                    statistic={{
                        title: '教授课程次数',
                        value: "Top 5",
                        // suffix: '/ 100',
                    }}
                    chart={<BarChart />}
                />
                <Divider type={'vertical'} />
                <StatisticCard
                    statistic={{
                        title: '教授课程优秀率',
                        value: "Top 5",
                    }}
                    chart={<BarChart />}
                />
                <Divider type={'vertical'} />
                <StatisticCard
                    statistic={{
                        title: '教授课程挂科率',
                        value: "Top 5",
                    }}
                    chart={<BarChart />}
                />
            </StatisticCard.Group>
            <Divider />
            <ProCard
                title={"日程表"}
                extra={
                    <Space>
                        开始日期：<DatePicker onChange={startTimeOnChange} defaultValue={moment(new Date(), 'YYYY/MM/DD')} />&nbsp;&nbsp;
                        显示天数：<InputNumber min={5} max={10} defaultValue={5} onChange={numDaysOnchange} />&nbsp;&nbsp;
                        开始时间：<InputNumber min={6} max={13} defaultValue={8} onChange={(e) => setMinTime(e)} />&nbsp;&nbsp;
                        终止时间：<InputNumber min={14} max={23} defaultValue={20} onChange={(e) => setMaxTime(e)} />&nbsp;&nbsp;
                        {/* 时间间隔：<InputNumber min={1} max={6} defaultValue={1} onChange={(e) => setHourlyChunks(e)} />&nbsp;&nbsp; */}
                    </Space>
                }
                bodyStyle={{paddingTop:0}}
            >
                <AntdDivider style={{marginTop:10}}/>
                <ScheduleSelector
                    // selection={schedule}
                    // selectionScheme={"linear"}
                    numDays={numDays}
                    minTime={minTime}
                    maxTime={maxTime}
                    startDate={startTime}
                    hourlyChunks={hourlyChunks}
                    // onChange={onChange}
                    timeFormat={"HH:mm"}
                    renderDateCell={(datetime: Date, selected: boolean, refSetter: (dateCell: null) => void) => {
                        let tag: boolean = true;
                        return (
                            <>
                                {
                                    ljh.map((element: any) => {
                                        if (datetime.getTime() === element.date.getTime()) {
                                            tag = false;
                                            return (
                                                <div className={styles.tableSelectCell} key={Math.random()}>
                                                    <span className={styles.tableCellTitle}>{element.title}：</span>
                                                    <span>{element.content}</span>
                                                </div>
                                            )
                                        }

                                    })
                                }
                                {
                                    tag ?
                                        <div className={styles.tableUnSelectCell} key={Math.random()}>
                                            <span>暂无日程</span>
                                        </div> : null
                                }
                            </>
                        )
                    }}
                />
            </ProCard>
            {/* <ProTable<TableListItem>
                columns={columns}
                dataSource={tableListDataSource}
                rowKey="key"
                pagination={{
                    showQuickJumper: true,
                }}
                search={{
                    filterType: 'light',
                }}
                dateFormatter="string"
                headerTitle="2022春季学期课程表"
            />
            <Divider /> */}



        </>
    );
};